<template>
    <!-- 信号域 -->
    <div style="position: relative;">
        <!-- <div class="width100 height100" :class="layout == 'one' ? 'flex one' : 'flex-column all'"
            style="position: absolute;">
            <div class="flex1 width100" :id="chart1" :style="{width: layout == 'all'?'100%': 'calc(100% / 3)'}"></div>
            
            <div class="flex1 width100" :id="chart2" :style="{width: layout == 'all'?'100%': 'calc(100% / 3)'}"></div>
            <div class="flex1 width100" :id="chart3" :style="{width: layout == 'all'?'100%': 'calc(100% / 3)'}"></div>
        </div> -->

        <div class="width100 height100" :class="layout == 'one' ? 'flex one' : 'flex-column all'"
            style="position: absolute;">
            <div class="flex-column" :class="layout == 'one' ? 'flex1' : 'flex2'">
                <!-- 时域波形图 -->
                <div class="back flex1" :id="chart1"></div>
                <!-- 折线图 -->
                <div class="back flex1" :id="chart2">
                </div>
            </div>
            <!-- 瀑布图 -->
            <div class="back flex1 chart" :id="chart3"></div>
        </div>
    </div>
</template>

<script>
import * as echarts from "echarts";

export default {
    name: 'pageSignal',
    emits: [],
    components: {},
    props: {
        // 布局类型
        layout: { type: String, default: 'one' },
        showClass: { type: Boolean },
        change: {},
        socketObj: { type: Object, default: () => { } }
    },
    watch: {
        change() {
            this.$nextTick(() => {
                setTimeout(this.chartResize, 20);
            })
        },
        socketStatus(val) {
            if (val) this.initUpdateBack();
        },
    },
    data() {
        return {
            // 频谱图id
            chart1: null,
            // 折线图
            chart2: null,
            // 折线图
            snrChart1: null,
            // 折线图
            snrChart2: null,
            // 信道可用性分析图id
            chart3: null,
            // 时域波形图缓存
            timeDatas: [],
            // 时域固定长度
            xAxis: Array.from({ length: 4000 }, (_, index) => index),
            yAxis: Array.from({ length: 4000 }, (_, index) => null)
        }
    },
    computed: {
        socketStatus() {
            return this.socketObj.status
        },
    },
    created() {
        this.chart1 = this.$uuid();
        this.chart2 = this.$uuid();
        this.chart3 = this.$uuid();
    },
    mounted() {
        this.$nextTick(() => {
            setTimeout(() => {
                // 初始化图像
                this.initChart();
                // 初始化回调函数和启动接收数据
                this.initUpdateBack();
            }, 200)
            // 开启更新
            // setTimeout(() => {
            //     setInterval(this.updateCharts, 200)
            // }, 5000)

        })
    },
    methods: {
        // 初始化socket返回处理函数
        initUpdateBack() {
            if (!this.socketObj) return;
            this.socketBack();
            this.startPush();
        },
        // 显示的时域数据
        showDatas() {
            let list = [];
            for (let i = 0; i < this.timeDatas.length; i++) {
                list.push(...this.timeDatas[i])
            }
            return list
        },
        // 设置socket回调函数
        socketBack() {
            // 时域波形图回调函数
            this.socketObj.setMsgBack({
                cmd: 'push-time',
                fun: rs => {
                    const { time, single } = this.formartResult(rs.data);
                    this.yAxis.splice(0, single.length);
                    this.yAxis.push(...single)
                    this.updateCharts1(this.yAxis)
                },
            })
            // 频谱图回调函数
            this.socketObj.setMsgBack({
                cmd: 'push-Spectrogram',
                fun: rs => {
                    const { amp, freq } = this.formartResult(rs.data);
                    let list = [];
                    for (let i = 0; i < amp.length; i++) list.push([freq[i] / 10 ** 3, amp[i]]);
                    this.updateCharts2(list)
                },
            })
        },
        // 启动推送消息
        startPush() {
            // 时域波形图
            // this.socketObj.sendMsg({ cmd: 'start-time' })
            this.socketObj.sendUuid({ cmd: 'start-time' }).then(rs => {
                const { showNumber } = rs.data;
                if (showNumber) {
                    this.xAxis = Array.from({ length: showNumber * 10 }, (_, index) => index);
                    this.yAxis = Array.from({ length: showNumber * 10 }, (_) => null);
                    // 重新初始化长度
                    this.initChart1();
                }
            })
            // 启动频谱图数据接收
            this.socketObj.sendMsg({ cmd: 'start-Spectrogram' })
        },
        // socket数据过滤统一处理
        formartResult(result) {
            let { dataLables, data } = result;
            let resultMap = {};
            if (dataLables.length != data.length) {
                return resultMap
            } else {
                for (let i = 0; i < dataLables.length; i++) {
                    resultMap[dataLables[i]] = data[i]
                }
            }
            return resultMap
        },
        // 初始化图形dom
        initChart() {
            this.initChart1();
            this.initChart2();
        },
        initChart1(datas = []) {
            if (!this.snrChart1) this.snrChart1 = echarts.init(document.getElementById(this.chart1));
            this.snrChart1.setOption({
                grid: { containLabel: false, show: true, backgroundColor: 'black', left: '50', bottom: '40', right: '30', top: '40' },
                xAxis: [
                    { data: this.xAxis, type: 'category', silent: true, name: 'FREQ(KHz)', nameGap: 10, nameRotate: 90, boundaryGap: false, axisLine: { onZero: false }, splitLine: { show: false }, scale: true, show: false },
                    { type: 'value', silent: true, axisLine: { onZero: false }, splitLine: { show: false }, position: 'bottom', max: 0, min: -10 }
                ],
                yAxis: {
                    type: 'value', name: `Magnitude\nResponse(dB)`, nameGap: 10, nameRotate: 0, nameTextStyle: { padding: [50, 0, 0, 0], rich: {} }, axisLine: { onZero: false }, splitLine: { show: false }, silent: true,
                    // boundaryGap: ['0%', '0%'],
                },
                series: [
                    {
                        type: 'line', showSymbol: false, connectNulls: true,
                        lineStyle: { color: '#857120', width: 1 },
                        // areaStyle: {
                        //     color:'#857120',
                        //     origin: 'start',
                        // },
                        data: datas,
                    },
                ]
            });
        },
        // 第二个图=频谱图
        initChart2(datas) {
            if (!this.snrChart2) this.snrChart2 = echarts.init(document.getElementById(this.chart2));
            this.snrChart2.setOption({
                grid: { containLabel: false, show: true, backgroundColor: 'black', left: '50', bottom: '40', right: '30', top: '40' },
                xAxis: { type: 'value', name: 'FREQ(KHz)', nameGap: 10, nameRotate: 90, boundaryGap: false, axisLine: { onZero: false }, splitLine: { show: false }, scale: true },
                yAxis: { type: 'value', name: `Magnitude\nResponse(dB)`, nameGap: 10, nameRotate: 0, nameTextStyle: { padding: [50, 0, 0, 0], rich: {} }, axisLine: { onZero: false }, splitLine: { show: false }, max: 50, min: -150 },
                series: [
                    {
                        data: datas,
                        type: 'line', showSymbol: false, connectNulls: true, lineStyle: { color: '#857120', width: 1 },
                    },
                ]
            });
        },
        // 更新折线图
        updateCharts() {
            this.updateCharts1();
            this.updateCharts2();
        },
        // 更新折线图
        updateCharts1(datas) {
            if (!this.snrChart1) {
                this.initChart1(datas);
            } else {
                this.snrChart1.setOption({
                    series: [{ data: datas }]
                })
            }
        },
        updateCharts2(datas) {
            let min = datas[0][0];
            let max = datas[datas.length - 1][0];
            if (!this.snrChart2) {
                this.initChart2(datas);
            } else {
                this.snrChart2.setOption({
                    xAxis: { min, max },
                    series: [{ data: datas }]
                })
            }
        },
        // 适配图像
        chartResize() {
            if (!this.snrChart1) {
                this.initChart1()
            } else {
                this.snrChart1.resize()
            }
            if (!this.snrChart2) {
                this.initChart2()
            } else {
                this.snrChart2.resize()
            }
        },
    },
    beforeDestroy() {
        // 删除socket的数据监听
        if (this.socketObj) {
            // 停止推送
            this.socketObj.sendMsg({ cmd: 'stop-time' });
            this.socketObj.sendMsg({ cmd: 'stop-Spectrogram' });
            // 删除处理函数
            this.socketObj.removeMsgBack({ cmd: 'push-time' })
            this.socketObj.removeMsgBack({ cmd: 'push-Spectrogram' })
        }
    }
}
</script>

<style lang="scss" scoped></style>